<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>订单支付</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/main.css"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <jsp:include page="/pages/common/header.jsp"/>
    <%--主体内容--%>
    <div id="content_body" class="layui-row" style="height: 69%;width: 100%;display: flex;">
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
        </div>
        <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">
            <div class="order_body" id="order_body">
                <div class="order_info_nav">确认订单信息</div>
                <div class="order_info_body">
                    <c:forEach items="${orderItems}" var="orderItem">
                        <table cellspacing="10">
                            <thead>
                            <tr>
                                <th>订单号</th>
                                <th>商品图片</th>
                                <th>商品名</th>
                                <th>卖家</th>
                                <th>价格</th>
                                <th>发布时间</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${orderItem.productList}" var="product">
                                <tr>
                                    <td>${orderItem.orderId}</td>
                                    <td><img alt="" src="${product.img}"></td>
                                    <td>${product.name}</td>
                                    <td>${product.releaseUserPojo.realName}</td>
                                    <td>${product.price}</td>
                                    <td>${product.stringReleaseTime}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <div style="width: 95%;height: 30px;margin: 3px auto;background:#f9f9f9;">
                            <p style="float: right;color: red;margin: 2px 30px;line-height: 24px;font-size: 12px">
                                小计：${orderItem.totalPrice}</p>
                        </div>
                    </c:forEach>
                </div>
                <div style="width: 92%;height: 33%;margin:0 auto;display: flex">
                    <div style="width: 50%;">
                        <div class="order_address_nav">确认地址信息</div>
                        <div class="order_address_body">
                            <div class="order_address_item">
                                <p><span id="schoolSpan" style="margin: 0;display: inline;">南京信息工程大学</span> (<span
                                        id="username"
                                        style="margin: 0;padding: 0;display: inline">${sessionScope.user.realName}</span>收)
                                </p>
                                <div style="float:left;">
                                    <span id="address">${sessionScope.user.address}</span>
                                    <span id="phone">${sessionScope.user.phone}</span>
                                </div>
                                <div style="float: right;">
                                    <a href="javascript:updatePersonInfo();" style="color: #fca130"><span>修改</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <div class="order_address_nav">支付方式</div>
                        <div class="order_address_body">
                            <div class="order_payment_item">
                                <input type="radio" title="" name="payWay" checked value="0">
                                <img src="static/img/payment.svg" alt=""/>
                            </div>
                            <div class="order_payment_item">
                                <input type="radio" title="" name="payWay" value="1">
                                <img src="static/img/weiChat.svg" alt=""/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order_payment_tail" style="color: red;height: 45px;line-height: 49px;margin: 0 auto;">
                    共:${totalPrice}元
                    <button class="layui-btn layui-btn-sm"
                            style="float: right;margin-right: 20px;background: red;margin-top:10px" onclick="payment()">
                        确认支付
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
        </div>
    </div>

    <%@include file="/pages/common/footer.jsp" %>
    <div id="personInfo" style="display: none;width: 90%;margin: 6px auto;">
        <form class="layui-form" action="">
            <label>收件人:<input type="text" class="layui-input"></label>
            <label>地区:
                <select name="city" lay-filter="city" class="layui-input">
                    <c:forEach var="school" items="${schoolData}">
                        <option value="${school.city}">${school.city}</option>
                    </c:forEach>
                </select>
            </label>
            <label>学校:<select name="city" lay-filter="school" id="school">
                <option value="南京信息工程大学">南京信息工程大学</option>
            </select> </label>
            <label>具体地址:<input type="text" class="layui-input"></label>
            <label>联系电话:<input type="text" class="layui-input"></label>
        </form>
    </div>
</div>
<script>
    let schoolData = {};
    <c:forEach var="school" items="${schoolData}" varStatus="schoolstatus">
    var schoolList${schoolstatus.index} = [];
    <c:forEach var="schoolName" items="${school.schoolName}" varStatus="status">
    schoolList${schoolstatus.index}[${status.index}] = '${schoolName}'
    </c:forEach>
    schoolData['${school.city}'] = schoolList${schoolstatus.index}
    </c:forEach>


    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });

    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    var form = null;
    layui.use('form', function () {
        form = layui.form;
        form.render();
        //下拉选择框监听事件
        form.on('select(city)', function (data) {
            let mySchool = schoolData[data.value];
            console.log(mySchool);
            let option = "";
            for (let i = 0; i < mySchool.length; i++) {
                option += " <option value='" + mySchool[i] + "'>" + mySchool[i] + "</option>";
            }
            console.log(option);
            $('#school').html(option);
            form.render();
        });
    });


    function updatePersonInfo() {
        let personInfo_div = $("#personInfo");
        let children = $(personInfo_div).children()[0];
        $(children[0]).val($("#username").text());
        $(children[5]).val($("#address").text());
        $(children[6]).val($("#phone").text());

     /*   console.log(children);
        for (let i = 0; i < children.length; i++) {
            console.log(i, $(children[i]));
        }*/

        let index = layer.open({
            type: 1
            , area: '300px'
            , tipMore: true
            , content: personInfo_div
            , shadeClose: true
            , resize: false
            , title: "修改地址"
            , btn: ['确定', '取消']
            , yes: function () {
                let username = $(children[0]).val();
                let address = $(children[5]).val();
                let phone = $(children[6]).val();
                let school = $('#school').val();
                if (username === "") {
                    layer.msg("收件人不能为空");
                    return false;
                }
                if (address === "") {
                    layer.msg("地址不能为空");
                    return false;
                }
                if (phone === "") {
                    layer.msg("联系电话不能为空");
                    return false;
                }
                if (!(/^1[1-9]\d{9}$/.test(phone))) {
                    layer.msg("手机号码有误，请重填");
                    return false;
                }
                $("#username").text(username);
                $("#address").text(address);
                $("#phone").text(phone);
                $("#schoolSpan").text(school);
                layer.close(index);
            }
            , btn2: function () {
                layer.close(index);
            }
        });
    }

    function payment() {
        let orderList = [];
        let phone = $('#phone').text();
        let address = $("#schoolSpan").text() + $('#address').text();
        let username = $('#username').text();
        let payWay = $("input[name='payWay']:checked").val();
        let errorMessage = null;
        if (phone === "")
            errorMessage = "联系方式不能为空";
        else if (address === "")
            errorMessage = "收货地址不能为空";
        else if (username === "")
            errorMessage = "收件人不能为空";

        if (errorMessage !== null) {
            layer.msg(errorMessage, {
                icon: 2
                , time: 2000
            });
            return false;
        }
        <c:forEach items="${orderItems}" var="orderItem" varStatus="orderItemStatus">
        <c:forEach items="${orderItem.productList}" var="product" varStatus="status">
        let order_${orderItemStatus.index}${status.index} = {};
        order_${orderItemStatus.index}${status.index}["orderId"] = '${orderItem.orderId}';
        order_${orderItemStatus.index}${status.index}["releaseUser"] = '${product.releaseUserPojo.id}';
        order_${orderItemStatus.index}${status.index}["purchaserPhone"] = phone;
        order_${orderItemStatus.index}${status.index}["address"] = address;
        order_${orderItemStatus.index}${status.index}["purchaseUserName"] = username;
        order_${orderItemStatus.index}${status.index}["productName"] = '${product.name}';
        order_${orderItemStatus.index}${status.index}["productImg"] = '${product.img}';
        order_${orderItemStatus.index}${status.index}["productId"] = '${product.id}';
        order_${orderItemStatus.index}${status.index}["purchaseWay"] = payWay;
        order_${orderItemStatus.index}${status.index}["price"] = '${product.price}';
        orderList.push(order_${orderItemStatus.index}${status.index});
        </c:forEach>
        </c:forEach>

        $.ajax({
            url: "http://localhost/campus/order/payment"
            , type: "POST"
            , data: "orders=" + encodeURIComponent(JSON.stringify(orderList)) + "&favoriteIds=" +
                '${favoriteIds}' + "&totalPrice=" +${totalPrice}
            , success: function (data) {
                $('#order_body').html(data);
                if (payWay === "0") {
                    $("[name='punchout_form']").submit();
                }
            }
        });
        // window.location.href = "http://localhost/campus/order/payment?orders="+ encodeURIComponent(JSON.stringify(orderList))
    }
</script>
</body>
</html>
